<template>
  <view class="page-container">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
      <!-- 顶部标题�?-->
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="page-title">我的收藏</text>
      </view>

      <!-- Tab切换 -->
      <view class="tab-container">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', { active: currentTab === tab }]"
          @click="currentTab = tab"
        >
          {{ tab }}
        </view>
      </view>
    </view>

    <!-- 可滚动内容区�?-->
    <view class="scrollable-content">
      <scroll-view class="content-container" scroll-y="true">
        <!-- 空状�?-->
        <view v-if="displayList.length === 0" class="empty-state">
          <text class="empty-text">暂无收藏记录</text>
        </view>

        <!-- 职位卡片列表 -->
        <block v-else>
          <!-- 职位卡片 -->
          <view 
            v-for="(item, index) in displayList" 
            :key="index"
            :class="['card', item.type]"
            @click="goToDetail(item)"
          >
            <!-- 职位卡片 -->
            <template v-if="item.type === 'job'">
              <view class="job-title-row">
                <text class="job-title">{{ item.title }}</text>
                <text class="job-salary">{{ item.salary }}</text>
              </view>
              <view class="job-company-row">
                <text class="company">{{ item.company }}</text>
                <text class="tag" v-for="(tag, i) in item.tags" :key="i">{{ tag }}</text>
              </view>
              <view class="job-meta">
                <text class="meta">{{ item.date }}</text>
                <text class="meta">{{ item.location }}</text>
                <text class="meta">{{ item.views }}看过</text>
              </view>
            </template>

            <!-- 公司卡片 -->
            <template v-else-if="item.type === 'company'">
              <view class="company-header">
                <image class="company-logo" :src="item.logo" mode="aspectFit"></image>
                <view class="company-info">
                  <text class="company-name">{{ item.name }}</text>
                  <text class="company-desc">{{ item.industry }} | {{ item.scale }} | {{ item.nature }}</text>
                </view>
              </view>
              <view class="company-tags">
                <text class="company-tag" v-for="(tag, i) in item.tags" :key="i">{{ tag }}</text>
              </view>
            </template>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
   return {
       tabs: ['全部', '岗位', '公司'],
       currentTab: '全部',
       favoriteJobs: [
         {
           type: 'job',
           id: 'job1',
           title: '前端开发工程师',
           company: '字节跳动',
           salary: '25-35k·16薪',
           tags: ['互联网', '前端开发', '应届生'],
           date: '2025-4',
           location: '北京',
           views: 1200,
           recruitType: '校园招聘'
         },
         {
           type: 'job',
           id: 'job2',
           title: '产品经理',
           company: '腾讯',
           salary: '20-30k·16薪',
           tags: ['互联网', '产品', '应届生'],
           date: '2025-4',
           location: '深圳',
           views: 980,
           recruitType: '校园招聘'
         }
       ],
       favoriteCompanies: [
         {
           type: 'company',
           id: 'company1',
           name: '字节跳动',
           logo: '/static/company/bytedance.png',
           industry: '互联网',
           scale: '10000人以上',
           nature: '民营企业',
           tags: ['氛围好', '五险一金', '年终奖', '股票期权']
         },
         {
           type: 'company',
           id: 'company2',
           name: '腾讯',
           logo: '/static/company/tencent.png',
           industry: '互联网',
           scale: '10000人以上',
           nature: '民营企业',
           tags: ['领导好', '技术大牛', '免费三餐', '带薪年假']
         }
       ]
     }
   },
   computed: {
     displayList() {
       switch (this.currentTab) {
         case '岗位':
           return this.favoriteJobs
         case '公司':
           return this.favoriteCompanies
         default:
           return [...this.favoriteJobs, ...this.favoriteCompanies]
       }
     }
   },

  methods: {
    goBack() {
      uni.navigateBack()
    },
    goToDetail(item) {
      if (item.type === 'job') {
        uni.navigateTo({
          url: `/pages/job-detail/index?id=${item.id}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/company-detail/index?id=${item.id}`
        })
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow: hidden;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
}

.scrollable-content {
  flex: 1;
  margin-top: 280rpx;
  position: relative;
  background: transparent;
  z-index: 10;
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32rpx;
  background: rgba(16, 185, 129, 0.15);
  border: 1rpx solid rgba(16, 185, 129, 0.2);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-button:active {
  transform: scale(0.9) translateY(2rpx);
  background: rgba(16, 185, 129, 0.3);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.tab-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20rpx 60rpx;
  background: transparent;
}

.tab-item {
  font-size: 32rpx;
  color: #666;
  padding: 10rpx 40rpx;
  border-radius: 32rpx;
  transition: all 0.3s;
}

.tab-item.active {
  color: #333333;
  font-weight: 700;
  background-color: #fff;
}

.content-container {
  height: calc(100vh - 200rpx);
  padding: 30rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
}

/* 职位卡片样式 */
.job-title-row {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #222;
}

.job-salary {
  color: #ff2d2d;
  font-size: 32rpx;
  font-weight: 700;
}

.job-company-row {
	 flex-direction: row;
  display: flex;
  align-items: center;
  margin: 16rpx 0;
  flex-wrap: wrap;
}

.company {
  color: #666;
  font-size: 26rpx;
  margin-right: 16rpx;
}

.recruit-type {
  color: var(--primary-color);
  font-size: 26rpx;
  margin-right: 16rpx;
}

.tag {
  background: #f2f2f2;
  color: #888;
  font-size: 22rpx;
  border-radius: 8rpx;
  padding: 2rpx 10rpx;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}

.job-meta {
  flex-direction: row;
  display: flex;
  color: #bbb;
  font-size: 22rpx;
  gap: 24rpx;
}

/* 公司卡片样式 */
.company-header {
	 flex-direction: row;
  display: flex;
  align-items: center;
}

.company-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  margin-right: 24rpx;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #222;
  margin-bottom: 12rpx;
}

.company-desc {
  font-size: 24rpx;
  color: #666;
}

.company-tags {
	 flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
  gap: 12rpx;
}

.company-tag {
  background: #f2f2f2;
  color: #666;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
}
</style> 